<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>window事件</title>
    <style>
        * {
            box-sizing:border-box;
        }
        html,body,table,tr,th,td {
            margin:0;
            padding:0;
            border:0;
        }
        table {
            width:800px;
            border:1px solid #ccc;
        }
        caption {
            width:100%;
            height:30px;
            background:green;
            color:white;
            text-align:center;
            line-height:30px;
        }
        th {
            border:1px solid red;
            width:100px;
            height:100px;
            background:#ccc;
        }
    </style>
</head>
<body>
load 事件 所有页面和图片都被加载完成
DOMContentLoaded事件 DOM加载完毕后
readyStateChange事件 当页面状态变化时
unload事件  用户退出页面的时候
beforeUnLoad事件 用户退出页面之前
resize事件 窗口或者是框架被调整尺寸的时候
scroll事件 页面的滚动条改变的时候

<table>
    <caption>windows事件总结</caption>
    <thead>
    <tr>
        <th>window.onload事件</th>
        <th>window.onDOMContentLoaded事件</th>
        <th>window.onReayStateChange事件</th>
        <th>window.onUnload事件</th>
        <th>window.onBeforeUnLoad事件</th>
        <th>window.onResize事件</th>
        <th>window.onScroll事件</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
    </tr>
    </tbody>
</table>
<img src="http://pic91.nipic.com/file/20160313/5067821_104005422000_2.jpg">
<img src="http://pic95.nipic.com/file/20160414/4562496_115222967000_2.jpg">
<img src="http://pic95.nipic.com/file/20160420/20511871_130248344000_2.jpg">



</body>
</html>
<script>
   /* window.addEventListener('load',function(){
        alert('网站上所有的内容都被加载完毕了');
    });
    document.body.addEventListener('load',function(){
        alert('body被加载完毕了');
    })
    document.documentElement.addEventListener('load',function(){
        alert('HTML被加载完毕了');
    })
    var table = document.querySelector('table');
    table.addEventListener('load',function(){
        alert('table被加载完毕了');
    })
    var img = document.querySelector('img');
    img.addEventListener('load',function(){
        alert('图片被加载完毕了');
    })
    //对于 load事件来讲的话，只有图片和window才会被触发
    window.addEventListener('DOMContentLoaded',function(){
        alert('只有DOM元素被加载完成了');
    });*/
   //已经被废弃掉了
   /*window.addEventListener('readyStateChange',function(event){
        alert(1);
   });
   window.onreadystatechange = function(e){
        alert(1);
   }*/
   //被废弃掉了
   /*window.onunload = function(){
       alert('用户在离开');
   }*/
   //在用户关闭窗口之前
   //只有在IE下才管用啊，firefox 和chrome都不管用啊
   /*window.onbeforeunload = function(){
       alert('用户在离开之前');
   }
   window.addEventListener('beforeunload',function(){
       alert('用户在离开之前');
   })*/
   //当窗口的大小发生变化的时候触发
   window.addEventListener('resize',function(event){
       console.log(window.innerWidth);
   })
   //当滚动条位置发生变化的时候触发
   window.addEventListener('scroll',function(){
       console.log(document.documentElement.scrollTop);
   })



</script>